<template>
<div style="width:100%;height:100%;">
    <div
        class="print"
        v-for=" (item, index) in drawQr"
        :key="index"
    >
        <div :id="'qrcode'+index"></div>
        <div class="printText">
            <div>条码：{{item.barcode}}</div>
            <div>{{item.materialName}}</div>
            <div>{{item.materialCode}}</div>
        </div>
    </div>
</div>
</template>

<script>
import QRcode from "qrcodejs2"

export default {
    components: {
        // barcode: VueBarcode
    },
    props: {
        drawQr: {
            type: Array,
            default () {
                return [];
            }
        },
    },
    created() {
        // this.paginator(this.delInfo)
    },
    mounted() {
        this.$nextTick(() => {
            this.qrcode();
        })
    },
    data() {
        return {}
    },
    methods: {
        qrcode() {
            this.drawQr.map((x, index) => {
                document.getElementById(`qrcode${index}`).innerHTML = '';
                let qrcode = new QRcode(`qrcode${index}`, {
                    width: 75,
                    height: 75,
                    text: `${x.barcode}`
                });
            });
        },
    },
    watch: {
        drawQr: {
            handler(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        this.qrcode();
                    })
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@page {
    size: 60mm 40mm !important;
    margin: 0;
}

.print {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.printText {
    text-align: center;
    font-size: 10px;
    margin-top: 10px;
}
</style>
